<template>
	<view>
		<qiun-title-bar title="博客类别比例"/>
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="pie" :opts="{legend:{fontSize:10}}"/>
		</view>
			<qiun-title-bar title="最新博客分析"/>
			<!-- 开启滚动条，需要开启拖动功能，即:ontouch="true" ，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId -->
			<view class="charts-box">
			  <qiun-data-charts type="column" canvasId="scrollcolumnid" 
			  :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,fontSize:10}}" 
			  :ontouch="true" :canvas2d="true" :chartData="column"/>
			</view>
			<qiun-title-bar title="常用标签词云图"/>
			<view class="charts-box">
			  <qiun-data-charts type="word" :chartData="word"/>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pie:{},
				column:{},
				word:{}
			}
		},
		onLoad() {
			this.getCategories()
			this.getLatestBlogs()
			this.getTags()
		},
		onPullDownRefresh(){
			this.getCategories()
			this.getLatestBlogs()
			this.getTags()
		},
		methods: {
				getCategories(){
					this.pie = {
						series:[{
							data:[]
						}]
					}
					let url = this.$params.host + this.$params.action_categories
					this.$request.get(url, res=>{
						url = this.$params.host + this.$params.action_category_count
						let i = 0
						res.data.data.forEach(async (c) => {
							let res = await this.$request.request(url + c.id)
							if(res.success){
								let category = {
									name:c.name,
									value:res.data
								}
								this.pie.series[0].data.push(category)
							}
								
						})
					})
				},
				getLatestBlogs(){
					this.column = {
						categories:[],
						series:[
							{
								name:"点赞数",
								data:[]
							},{
								name:"评论数",
								data:[]
							}
						]
					}
					let url = this.$params.host + this.$params.action_blog
					this.$request.get(url, res =>{
						res.data.data.forEach(b =>{
							this.column.categories.push(this.$utils.ellipsis(b.title, 11))
							this.column.series[0].data.push(b.good)
							this.column.series[1].data.push(b.comments.length)
						})
					})
				},
				getTags(){
					this.word = {
						series:[]
					}
					let url = this.$params.host + this.$params.action_tags
					this.$request.get(url, res=>{
						url = this.$params.host + this.$params.action_tag_count
						let i = 0
						res.data.data.forEach(async (c) =>{
							let res = await this.$request.request(url + c.id)
							if(res.success){
								let tag ={
									name:c.name,
									textSize:res.data * 10
								}
								this.word.series.push(tag)
							}
						})
					},() => {
					uni.stopPullDownRefresh()
					})
				}
			}
		}
</script>

<style>
.charts-box{
	width: 100%;
	height: 300rpx;
}
</style>